/* https://vitejs.cn/vite3-cn/config/server-options.html  vite服务器配置*/
import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv, createServer } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
/* 按需引入的Element Plus */
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 导入一下路劲,在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名！！！
import path from 'path'
// 挂载SVG图库
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
/* 运用我们的插件早造一个假接口进行使用. */
import { viteMockServe } from 'vite-plugin-mock'
import { Server } from 'node:http'

// https://vitejs.dev/config/
export default defineConfig((command, mode) => {
  /* 获取各种环境下的对应变量 
    我要加载的哪个环境的文件,以及这个文件在哪个位置
    process.cwd(): 这在 Node.js 中是一个获取当前工作目录的方法。
    在这个上下文中，process.cwd() 被用作 loadEnv 函数的第二个参数，它指定了 .env 文件的搜索起点。
    通常情况下，.env 文件位于项目的根目录下，因此使用 process.cwd() 可以确保从正确的位置开始查找这些文件。
  */
  return {
    plugins: [
      vue(),
      vueJsx(),
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      }),
      // 挂载SVG图库配置
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        symbolId: 'icon-[dir]-[name]'
      }),
      viteMockServe({
        localEnabled: command === 'serve'
      })
    ],
    build: {
      module: 'es2022' // 设置为允许使用 import.meta 的选项之一
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    // scss全局变量的配置
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";'
        }
      }
    },
    server: {
      proxy: {
        '/api': {
          /* 获取数据的服务器地址设置 */
          target: 'http://sph-api.atguigu.cn',
          // 是否需要代理跨域
          changeOrigin: true,
          //路径重写,因为我们真实路径中的浅醉是没有/api的,所以我们将其路径重写为空''
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
  }
})
